<template>
  <div class="rank">
    <header>
      <div class="left" @click="back()">
        <i></i>
      </div>
      <div class="center">排行榜</div>
    </header>
    <main>
      <div class="official">
        <div class="top">官方榜</div>
        <div class="item" v-for="(item,index) in official_data" :key="index">
          <div class="left">
            <img v-lazy="item.coverImgUrl" alt />
            <i>{{item.updateFrequency}}</i>
          </div>
          <div class="right">
            <p
              v-for="(item2,index2) in item.tracks"
              :key="index2"
            >{{index2+1}}.{{item2.first}}-{{item2.second}}</p>
          </div>
        </div>
      </div>
      <div class="more">
        <div class="top">更多榜单</div>
        <div class="content">
          <div class="item2" v-for="(item,index) in more_data" :key="index">
            <div class="img">
              <img v-lazy="item.coverImgUrl" alt />
              <i>{{item.updateFrequency}}</i>
            </div>
            <div class="foot">
              <p class="el2">{{item.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("toplist_detail", [
      "toplist_detail_data",
      "official_data",
      "more_data"
    ])
  },
  created() {
    this.$store.dispatch("toplist_detail/getToplistDetailData", {});
  },
  methods: {
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.rank {
  main {
    padding-top: 0.8rem;
    .more {
      padding: 0.3rem;
      .top {
        font-size: 0.4rem;
        color: #333;
        text-align: left;
        font-weight: 900;
        line-height: 1rem;
      }
      .content {
        overflow: hidden;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        .item2:nth-child(3n) {
          padding-right: 0;
        }
        .item2 {
          width: 2.15rem;
          padding-right: 0.2rem;
          padding-bottom: 0.3rem;
          .foot {
            padding-top: 0.1rem;
            p {
              color: #555;
              font-size: 0.26rem;
              text-align: left;
            }
          }
          .img {
            position: relative;
            img {
              border-radius: 0.1rem;
            }
            i {
              position: absolute;
              bottom: 0.1rem;
              left: 0.1rem;
              color: #fff;
              font-size: 0.2rem;
              font-style: normal;
            }
          }
        }
      }
    }
    .official {
      padding: 0.3rem;
      .top {
        font-size: 0.4rem;
        color: #333;
        text-align: left;
        font-weight: 900;
        line-height: 1rem;
      }

      .item {
        overflow: hidden;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 0.1rem 0;
        .left {
          position: relative;
          img {
            width: 2rem;
            height: 2rem;
            border-radius: 0.1rem;
          }
          i {
            position: absolute;
            bottom: 0.1rem;
            left: 0.1rem;
            color: #fff;
            font-size: 0.2rem;
            font-style: normal;
          }
        }
        .right {
          width: 4.8rem;
          padding-left: 0.2rem;
          p {
            line-height: 0.68rem;
            text-align: left;
            color: #666;
            font-size: 0.28rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  header {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    left: 0rem;
    top: 0rem;
    z-index: 100;
    background-color: #fff;
    overflow: hidden;
    position: fixed;
    .left {
      position: absolute;
      top: 0.1rem;
      left: 0.2rem;
      height: 0.6rem;
      i {
        background: url(../images/axj.png) no-repeat;
        background-size: 100% 100%;
        width: 0.6rem;
        height: 0.6rem;
        display: inline-block;
      }
    }
    .center {
      font-size: 0.4rem;
      color: #333;
      text-align: left;
      padding-left: 1.2rem;
    }
  }
}
</style>